<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/jquery.easyui.min.js">
    <script type="text/javascript" src="../js/jquery-easyui-1.6.10/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery-easyui-1.6.10/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>

</head>

<body>
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',split:true" title="West" style="width:200px;">
            <ul id="tt"></ul>
        </div>
        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
            <table id="dg"></table>

            <div id="dlg" class="easyui-dialog" title="数据操作" data-options="iconCls:'icon-save',closed:true" style="width:770px;height:350px;padding:10px">
                <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
                    <div style="margin-bottom:10px">
                        ID: <input class="easyui-textbox" name="_id" style="width:90%" />
                    </div>
                    <div style="margin-bottom:10px">
                        CateID: <input class="easyui-textbox" name="cateId" id='cateId' style="width:90%" />
                    </div>
                    <div style="margin-bottom:20px">
                        新闻标题：<input class="easyui-textbox" name="title" style="width:90%" data- options="label:'新闻标题:',required:true">
                    </div>
                    <div style="margin-bottom:20px">
                        新闻类别：<input class="easyui-textbox" name="category" style="width:90%" data- options="label:'新闻类别:',required:true">
                    </div>
                    <div style="margin-bottom:20px">
                        新闻内容：<input class="easyui-textbox" name="massage" style="width:90%" data- options="label:'新闻内容:',required:true">
                    </div>
                    <div style="margin-bottom:20px">
                        评论作者：<input class="easyui-textbox" name="author" style="width:90%" data- options="label:'评论作者:',required:true">
                    </div>
                    <div style="margin-bottom:20px">
                        评论内容：<input class="easyui-textbox" name="content" style="width:90%" data- options="label:'评论内容:',required:true">
                    </div>
                    <div style="margin-bottom:10px">
                        评论时间：<input class="easyui-datetimebox" name='releasetime' value="请选择时间" style="width:410px">
                    </div>
                    <div style="margin-bottom:10px">
                        评论地点：<select class="easyui-combobox" name="local" style="width:30%">
                            <option>齐齐哈尔</option>
                            <option>北京</option>
                            <option>上海</option>
                            <option>广东</option>
                            <option>山东</option>
                            <option>菏泽</option>
                            <option>黑龙江</option>
                            <option selected="selected">杭州</option>
                            <option>新疆</option>
                            <option>大连</option>
                            <option>沈阳</option>
                            <option>长春</option>
                            <option>成都</option>
                            <option>苏州</option>
                            <option>南昌</option>
                            <option>吉林</option>
                            <option>三亚</option>
                            </select>
                    </div>
                    <div style="margin-bottom:10px">
                        评论数量：<input class="easyui-textbox" name="number" style="width:90%" data- options="label:'评论数量:',required:true">
                    </div>
                    <div style="margin-bottom:10px">
                        评论方式：<input class="easyui-textbox" name="fangshi" style="width:90%" data- options="label:'评论方式:',required:true">
                    </div>
                    <div style="margin-bottom:10px">
                        评关键字：<input class="easyui-textbox" name="keywords" style="width:90%" data- options="label:'评论关键字:',required:true">
                    </div>
                </form>
                <div style="text-align:center;padding:5px 0">
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

<script>
    var nodedata = {};

    $('#tt').tree({
        url: `http://10.31.161.18:3000/cate/list/1`,
        method: 'post',
        animate: true,
        onClick: function(node) {
            $(this).tree(node.state === 'closed' ? 'expand' : 'collapse', node.target);
            node.state = node.state === 'closed' ? 'open' : 'closed';

            // console.log(node)
            // var dataArr = [];

            // function res(data,text){

            //     for(var i in data){
            //         if(data[i].text == text){
            //             dataArr.push(data[i].text);
            //         }
            //     }
            // }

            var title = node.text;
            nodedata.cateId = node._id;
            nodedata.text = node.text;
            $('#dg').datagrid({
                url: 'http://localhost:3000/classify/list',
                title: node.text,
                queryParams: {
                    cateId: node._id,
                    text: node.text
                },
                toolbar: [{
                    text: '添加数据',
                    iconCls: 'icon-add',
                    handler: function() {
                        $('#ff').form('clear');
                        $('#dlg').dialog('open');
                        $('#cateId').textbox('setValue', nodedata.cateId);
                    }
                }, '-', {
                    text: '删除数据',
                    iconCls: 'icon-cut',
                    handler: function() {
                        deleteDate();
                    }
                }],
                fit: true,
                pagination: true,
                columns: [
                    [{
                        field: 'ck',
                        checkbox: true
                    }, {
                        field: 'title',
                        title: '新闻标题',
                        width: 100
                    }, {
                        field: 'category',
                        title: '新闻类别',
                        width: 100
                    }, {
                        field: 'massage',
                        title: '新闻内容',
                        width: 200
                    }, {
                        field: 'author',
                        title: '评论作者',
                        width: 100
                    }, {
                        field: 'content',
                        title: '评论内容',
                        width: 200
                    }, {
                        field: 'releasetime',
                        title: '评论时间',
                        width: 100
                    }, {
                        field: 'local',
                        title: '评论地点',
                        width: 100
                    }, {
                        field: 'number',
                        title: '评论数量',
                        width: 100
                    }, {
                        field: 'fangshi',
                        title: '评论方式',
                        width: 100
                    }, {
                        field: 'keywords',
                        title: '评论关键',
                        width: 100
                    }, {
                        field: '_id',
                        title: '操作',
                        width: 80,
                        formatter: function(value, row, index) {
                            return `<a href="#" onclick="editDate('${row._id}')">修改</a>  <a href="#" onclick="deleteDate('${row._id}')">删除</a>`;
                        }
                    }]
                ],
                onClickRow: function(index, row) {
                    console.log(index, row);
                }
            });
        }
    });


    function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function() {
                if ($(this).form('enableValidation').form('validate')) {
                    var formData = $('#ff').serializeJSON();
                    console.log(formData);
                    if ($('#ff').serializeJSON()._id) {
                        $.ajax({
                            url: `http://localhost:3000/classify/${formData._id}`,
                            type: 'put',
                            data: $('#ff').serializeJSON()
                        }).done(function(res) {
                            $('#dlg').dialog('close')
                            $('#dg').datagrid('reload');
                            $('#ff').form('clear');
                        });
                    } else {
                        delete formData._id;
                        console.log();
                        $('#cateId').val("nodedata.cateId");
                        $.ajax({
                            url: 'http://localhost:3000/classify',
                            type: 'post',
                            data: formData
                        }).done(function(res) {
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                            $('#ff').form('clear');
                        });
                    }

                };
            }
        });
    }

    function clearForm() {
        $('#ff').form('clear');
    }
    // var t = $('#dg').DataTable({
    //     ajax: {
    //         url: 'http://localhost:3000/classify/list',
    //         datasrc: function(result) {
    //             return result.rows;
    //         }
    //     }
    // });


    function deleteDate() {
        $.messager.confirm('确认框', '您确认删除该数据？', function(r) {
            if (r) {
                // $.ajax({
                //     url: `http://localhost:3000/classify/${id}`,
                //     type: 'delete'
                // }).done(function(res) {
                //     $('#dg').datagrid('reload');
                // });
                var dgSelections = $('#dg').datagrid('getSelections');
                var ids = [];
                for (var i = 0; i < dgSelections.length; i++) {
                    ids.push(dgSelections[i]._id);
                }
                $.ajax({
                    url: `http://localhost:3000/classify/${ids}`,
                    type: 'delete'
                }).done(function(res) {
                    $('#dg').datagrid('reload');
                });

            }
        });

    }

    function editDate(id) {
        $.ajax({
            url: `http://localhost:3000/classify/${id}`,
            type: 'get'
        }).done(function(res) {
            $('#ff').form('load', res);
            $('#dlg').dialog('open');
        });

    }
</script>